<template>
<div style="background:#eee;padding: 20px">
    <Modal v-model="name_point" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:center">
            <p>输入控制点新的名字</p>
            <Input v-model="new_point_name"/>
      </div>
            <div slot="footer">
                <Button type="error" size="large" long @click.native="rename_point_act">确定</Button>
            </div>
    </Modal>
    <Card :bordered="true" style="margin:20px 20px">
        <p slot="title">单点控制</p>

        <Table  ></Table>
    </Card>
    <br>
    <Card :bordered="false" style="margin:20px 20px">
        <p slot="title">未命名控制点</p>

        <Table @on-row-click="on_unamed_point_select" :columns="unamed_points_list_header" :data="unamed_points_list_data"></Table>
    </Card>
    <Card :bordered="false" style="margin:20px 20px">
        <p slot="title">已命名控制点</p>

        <Table @on-row-click="on_named_point_select" :columns="named_points_list_header" :data="named_points_list_data"></Table>
    </Card>
</div>
</template>

<script>
export default {
    created() {
        var that = this;
        this.unamed_points_list_data = [];
        this.named_points_list_data = [];
        this.refresh_unamed_point_data();
        this.fresh_named_point_data()

    },
    data() {
        return {
            unamed_points_list_header: [{
                    title: "编号",
                    key: "id"
                },
                {
                    title: "所属控制板",
                    key: "cid"
                },
                {
                    title: "控制点序号",
                    key: "point_index"
                },
                {
                    title: "控制点状态",
                    key: "state"
                },
                {
                    title: "控制点名称",
                    key: "name"
                }
            ],
            named_points_list_header: [{
                    title: "编号",
                    key: "id"
                },
                {
                    title: "所属控制板",
                    key: "cid"
                },
                {
                    title: "控制点序号",
                    key: "point_index"
                },
                {
                    title: "控制点状态",
                    key: "state"
                },
                {
                    title: "控制点名称",
                    key: "name"
                }
            ],
            unamed_points_list_data: null,
            named_points_list_data: null,
            name_point: false,
            new_point_name: '',
            selected_obj: null
        };

    },
    methods: {
        refresh_unamed_point_data: function () {
            var that = this;
            const axios = require('axios')
            axios.post('/get_new_controlpoints', {
                controller_id: -1
            }).then(function (response) {
                that.unamed_points_list_data = [];
                
                var data = response.data;
                if (data.Code == 0) {
                    var dat = data.data;
                    that.unamed_points_list_data = []
                    for (var i in dat) {
                        var datone = dat[i]
                        var row = {
                            id: datone.id.toString(),
                            cid: datone.ControllerID.toString(),
                            point_index: datone.PointIndex.toString(),
                            state: datone.Value.toString(),
                            name: datone.name.toString()
                        };
                        that.unamed_points_list_data.push(row)
                    }
                } else {

                }
            }).catch(function (error) {
                console.log('get_new_controlpoints')
                console.log('post error', error);
            }).then(function () {})
        },
        fresh_named_point_data: function () {
            var that = this
            const axios_named = require('axios')
            axios_named.post('/get_controlpoint_info', {
                id: -1
            }).then(function (response) {
                that.named_points_list_data = [];
                
                var data = response.data;
                if (data.Code == 0) {
                    var dat = data.data;
                    for (var i in dat) {
                        var datone = dat[i]
                        var row = {
                            id: datone.id.toString(),
                            cid: datone.ControllerID.toString(),
                            point_index: datone.PointIndex.toString(),
                            state: datone.Value.toString(),
                            name: datone.name.toString()
                        };
                        that.named_points_list_data.push(row)
                    }
                } else {

                }
            }).catch(function (error) {
                console.log('get_new_controlpoints')
                console.log('post error', error);
            }).then(function () {})
        },
        on_named_point_select: function (rowone) {
            
            var axios = require('axios');
            axios.post('/set_single_point', {
                ControllerID: rowone.cid,
                PointIndex: rowone.point_index,
                Opt: 1
            }).then(function (response) {
                
            }).catch(function (error) {
                console.log('on_named_point_select\r\n', rowone,'response',response,'err',error)
            }).then(function () {})
        },
        on_unamed_point_select: function (rowone) {
            this.name_point = true;
            this.selected_obj = rowone;
        },
        rename_point_act: function (args) {
            
            var that = this;
            var rowone = this.selected_obj
            var axios = require('axios')
            if (this.new_point_name == '') {
                alert('输入一个名称,不能为空')
                return;
            }
            var postdata = {
                id: rowone.id,
                name: that.new_point_name
            }
            axios.post('/name_new_controlpoints', postdata).then(function (response) {
                
            }).catch(function (error) {
                console.log('on_unamed_point_select\r\n', 'error\r\n', error)
            }).then(function () {
                that.name_point = false;
                that.fresh_named_point_data();
                that.refresh_unamed_point_data()
            })
        }
    }
};
</script>
<template>
<div style="background:#eee;padding: 20px">
    <Modal v-model="name_point" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:center">
            <p>输入控制点新的名字</p>
            <Input v-model="new_point_name"/>
      </div>
            <div slot="footer">
                <Button type="error" size="large" long @click.native="rename_point_act">确定</Button>
            </div>
    </Modal>
    <Card :bordered="true" style="margin:20px 20px">
        <p slot="title">单点控制</p>

        <Table  ></Table>
    </Card>
    <br>
    <Card :bordered="false" style="margin:20px 20px">
        <p slot="title">未命名控制点</p>

        <Table @on-row-click="on_unamed_point_select" :columns="unamed_points_list_header" :data="unamed_points_list_data"></Table>
    </Card>
    <Card :bordered="false" style="margin:20px 20px">
        <p slot="title">已命名控制点</p>

        <Table @on-row-click="on_named_point_select" :columns="named_points_list_header" :data="named_points_list_data"></Table>
    </Card>
</div>
</template>

<script>
export default {
    created() {
        var that = this;
        this.unamed_points_list_data = [];
        this.named_points_list_data = [];
        this.refresh_unamed_point_data();
        this.fresh_named_point_data()

    },
    data() {
        return {
            unamed_points_list_header: [{
                    title: "编号",
                    key: "id"
                },
                {
                    title: "所属控制板",
                    key: "cid"
                },
                {
                    title: "控制点序号",
                    key: "point_index"
                },
                {
                    title: "控制点状态",
                    key: "state"
                },
                {
                    title: "控制点名称",
                    key: "name"
                }
            ],
            named_points_list_header: [{
                    title: "编号",
                    key: "id"
                },
                {
                    title: "所属控制板",
                    key: "cid"
                },
                {
                    title: "控制点序号",
                    key: "point_index"
                },
                {
                    title: "控制点状态",
                    key: "state"
                },
                {
                    title: "控制点名称",
                    key: "name"
                }
            ],
            unamed_points_list_data: null,
            named_points_list_data: null,
            name_point: false,
            new_point_name: '',
            selected_obj: null
        };

    },
    methods: {
        refresh_unamed_point_data: function () {
            var that = this;
            const axios = require('axios')
            axios.post('/get_new_controlpoints', {
                controller_id: -1
            }).then(function (response) {
                that.unamed_points_list_data = [];
                
                var data = response.data;
                if (data.Code == 0) {
                    var dat = data.data;
                    that.unamed_points_list_data = []
                    for (var i in dat) {
                        var datone = dat[i]
                        var row = {
                            id: datone.id.toString(),
                            cid: datone.ControllerID.toString(),
                            point_index: datone.PointIndex.toString(),
                            state: datone.Value.toString(),
                            name: datone.name.toString()
                        };
                        that.unamed_points_list_data.push(row)
                    }
                } else {

                }
            }).catch(function (error) {
                console.log('get_new_controlpoints')
                console.log('post error', error);
            }).then(function () {})
        },
        fresh_named_point_data: function () {
            var that = this
            const axios_named = require('axios')
            axios_named.post('/get_controlpoint_info', {
                id: -1
            }).then(function (response) {
                that.named_points_list_data = [];
                
                var data = response.data;
                if (data.Code == 0) {
                    var dat = data.data;
                    for (var i in dat) {
                        var datone = dat[i]
                        var row = {
                            id: datone.id.toString(),
                            cid: datone.ControllerID.toString(),
                            point_index: datone.PointIndex.toString(),
                            state: datone.Value.toString(),
                            name: datone.name.toString()
                        };
                        that.named_points_list_data.push(row)
                    }
                } else {

                }
            }).catch(function (error) {
                console.log('get_new_controlpoints')
                console.log('post error', error);
            }).then(function () {})
        },
        on_named_point_select: function (rowone) {
            
            var axios = require('axios');
            axios.post('/set_single_point', {
                ControllerID: rowone.cid,
                PointIndex: rowone.point_index,
                Opt: 3
            }).then(function (response) {
                
            }).catch(function (error) {
                console.log('on_named_point_select\r\n', rowone,'response',response,'err',error)
            }).then(function () {})
        },
        on_unamed_point_select: function (rowone) {
            this.name_point = true;
            this.selected_obj = rowone;
        },
        rename_point_act: function (args) {
            
            var that = this;
            var rowone = this.selected_obj
            var axios = require('axios')
            if (this.new_point_name == '') {
                alert('输入一个名称,不能为空')
                return;
            }
            var postdata = {
                id: rowone.id,
                name: that.new_point_name
            }
            axios.post('/name_new_controlpoints', postdata).then(function (response) {
                
            }).catch(function (error) {
                console.log('on_unamed_point_select\r\n', 'error\r\n', error)
            }).then(function () {
                that.name_point = false;
                that.fresh_named_point_data();
                that.refresh_unamed_point_data()
            })
        }
    }
};
</script>
